﻿@using BookShop.Library.Constant
@using PagedList
@using PagedList.Mvc
@model BookShop.Site.Models.HomeViewModel
@{
    ViewBag.Title = "Sản phẩm | Book Shop Ngân Hà";
}

<ul class="breadcrumb">
    <li><a href="@Url.Action("Index", "Home")">Trang chủ</a></li>
    <li><a href="@Url.Action("ProductPage", "Home")">Sản phẩm</a></li>
    @if (ViewBag.SearchCategoryId != null)
    {
        <li><a href="@Url.Action("ProductPage", "Home", new { categoryId = ViewBag.SearchCategoryId })">@ViewBag.SearchCategoryName</a></li>
    }
</ul>
<div class="row margin-bottom-40">
    @if (Model != null)
    {
        Html.RenderPartial("_CategorySidebar", Model);
        <div class="col-md-9 col-sm-7 my-product-list">
            <div class="content-search margin-bottom-20" id="search-div">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <a data-toggle="collapse" data-parent="#search-div" href="#search-options" class="accordion-toggle">Điều kiện tìm kiếm</a>
                        </h2>
                    </div>
                    <div id="search-options" class="panel-collapse collapse">
                        <form action='@Url.Action("ProductPage", "Home")' method="POST">
                            <div class="panel-body row">
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label for="title">Tiêu đề sách</label>
                                        <input type="text" class="form-control" value="@ViewBag.SearchTitle" name="title" id="title"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="categoryId">Thể loại</label>
                                        <select class="form-control bs-select" id="categoryId" name="categoryId" data-live-search="true"></select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label for="authorId">Tác giả</label>
                                        <select class="form-control bs-select" id="authorId" name="authorId" data-live-search="true"></select>
                                    </div>
                                    <div class="form-group">
                                        <label for="publisherId">Nhà xuất bản</label>
                                        <select class="form-control bs-select" id="publisherId" name="publisherId" data-live-search="true"></select>
                                    </div>
                                </div>
                                <hr>
                                <div class="col-md-12">
                                    <button class="btn btn-primary  pull-right" type="submit">Tìm kiếm</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row list-view-sorting clearfix">
                <div class="col-md-2 col-sm-2 list-view">
                    <a href="#"><i class="fa fa-th-large"></i></a>
                    <a href="#"><i class="fa fa-th-list"></i></a>
                </div>
                <div class="col-md-10 col-sm-10">
                    <div class="pull-right">
                        <label class="control-label">Show:</label>
                        <select id="page_size_dropdown" class="form-control input-sm">
                            <option value="12">12</option>
                            <option value="24">24</option>
                            <option value="48">48</option>
                        </select>
                    </div>
                    <div class="pull-right">
                        <label class="control-label" style="width: 60px;">Sắp xếp:</label>
                        <select id="sort_dropdown" class="form-control input-sm">
                            <option value="" selected="selected">Mặc định</option>
                            <option value="@SortType.NameAsc">Tên sách (A - Z)</option>
                            <option value="@SortType.NameDesc">Tên sách (Z - A)</option>
                            <option value="@SortType.PriceDesc">Giá (Cao &gt; Thấp)</option>
                            <option value="@SortType.PriceAsc">Giá (Thấp &gt; Cao)</option>
                            <option value="@SortType.RatePointDesc">Điểm đánh giá (Cao &gt; Thấp)</option>
                            <option value="@SortType.RatePointAsc">Điểm đánh giá (Thấp &gt; Cao)</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row product-list">
                @foreach (var book in Model.AllBookList)
                {
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        @{ Html.RenderPartial("_Product", book); }
                    </div>
                }
            </div>
            <!-- BEGIN PAGINATOR -->
            <div class="row">
                <div class="col-md-4 col-sm-4 items-info">Tổng số: @ViewBag.TotalCount</div>
                @Html.PagedListPager((IPagedList)ViewBag.PageList, page => Url.Action("ProductPage", "Home",
                    new
                    {
                        page,
                        title = ViewBag.SearchTitle,
                        authorId = ViewBag.SearchAuthorId,
                        sort = ViewBag.SearchSort,
                        fromPrice = ViewBag.SearchMinPrice,
                        toPrice = ViewBag.SearchMaxPrice,
                        categoryId = ViewBag.SearchCategoryId,
                        publisherId = ViewBag.SearchPublisherId,
                        pageSize = ViewBag.SearchPageSize
                    }), new PagedListRenderOptions
                    {
                        DisplayLinkToFirstPage = PagedListDisplayMode.Always,
                        DisplayLinkToLastPage = PagedListDisplayMode.Always,
                        DisplayLinkToPreviousPage = PagedListDisplayMode.IfNeeded,
                        DisplayLinkToNextPage = PagedListDisplayMode.IfNeeded,
                        DisplayLinkToIndividualPages = true,
                        DisplayPageCountAndCurrentLocation = false,
                        MaximumPageNumbersToDisplay = 5,
                        DisplayEllipsesWhenNotShowingAllPageNumbers = true,
                        EllipsesFormat = "&#8230;",
                        LinkToFirstPageFormat = "««",
                        LinkToPreviousPageFormat = "«",
                        LinkToIndividualPageFormat = "{0}",
                        LinkToNextPageFormat = "»",
                        LinkToLastPageFormat = "»»",
                        PageCountAndCurrentLocationFormat = "Page {0} of {1}.",
                        ItemSliceAndTotalFormat = "Showing items {0} through {1} of {2}.",
                        FunctionToDisplayEachPageNumber = null,
                        ClassToApplyToFirstListItemInPager = null,
                        ClassToApplyToLastListItemInPager = null,
                        ContainerDivClasses = new[] { "col-md-8", "col-sm-8" },
                        UlElementClasses = new[] { "pagination", "pull-right" },
                        LiElementClasses = Enumerable.Empty<string>()
                    })
            </div>
            <!-- END PAGINATOR -->
        </div>
    }
</div>

@section Javascript{
    <script src="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src='~/Content/assets/global/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="~/Content/assets/frontend/pages/scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.bs-select').selectpicker({
            });
            getSearchCategories();
            getSearchPublishers();
            getSearchAuthors();
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 1000000,
                step: 1000,
                values: [0, 500000],
                slide: function (event, ui) {
                    $("#amount").val(ui.values[0] + " - " + ui.values[1]);
                    $('#fromPrice').val(ui.values[0]);
                    $('#toPrice').val(ui.values[1]);
                }
            });
            $('#page_size_dropdown').val('@ViewBag.SearchPageSize');
            $('#sort_dropdown').val('@ViewBag.SearchSort');
            $('#page_size_dropdown').on('change', function () {
                if (this.value) window.location.href = '/Home/ProductPage?' + 'title=' + '@ViewBag.SearchTitle' + '&sort=' + '@ViewBag.SearchSort' + '&authorId=' + '@ViewBag.SearchAuthorId' + '&categoryId=' + '@ViewBag.SearchCategoryId' + '&publisherId=' + '@ViewBag.SearchPublisherId' + '&fromPrice=' + '@ViewBag.SearchMinPrice' + '&toPrice=' + '@ViewBag.SearchMaxPrice' + '&pageSize=' + this.value;
            });
            $('#sort_dropdown').on('change', function () {
                if (this.value) window.location.href = '/Home/ProductPage?' + 'title=' + '@ViewBag.SearchTitle' + '&sort=' + this.value + '&authorId=' + '@ViewBag.SearchAuthorId' + '&categoryId=' + '@ViewBag.SearchCategoryId' + '&publisherId=' + '@ViewBag.SearchPublisherId' + '&fromPrice=' + '@ViewBag.SearchMinPrice' + '&toPrice=' + '@ViewBag.SearchMaxPrice' + '&pageSize=' + $('#page_size_dropdown').val();
            });
            $("#amount").val($("#slider-range").slider("values", 0) + " - " + $("#slider-range").slider("values", 1));
            $('#fromPrice').val($("#slider-range").slider("values", 0));
            $('#toPrice').val($("#slider-range").slider("values", 1));
            function getSearchCategories() {
                $("#categoryId").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetAllCategory")',
                    data: {},
                    success: function (categories) {
                        $("#categoryId").append('<option value="">All</option>');
                        $.each(categories, function (i, category) {
                            $("#categoryId").append('<option value="' + category.Id + '">' + category.Name + '</option>');
                        });
                        $('#categoryId').selectpicker('refresh');
                        $('#categoryId').selectpicker('val', '@ViewBag.SearchCategoryId');
                    },
                    error: function () {
                    }
                });
                return false;
            }
            function getSearchAuthors() {
                $("#authorId").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetAllAuthor")',
                    data: {},
                    success: function (authors) {
                        $("#authorId").append('<option value="">All</option>');
                        $.each(authors, function (i, author) {
                            $("#authorId").append('<option value="' + author.Id + '">' + author.Name + '</option>');
                        });
                        $('#authorId').selectpicker('refresh');
                        $('#authorId').selectpicker('val', '@ViewBag.SearchAuthorId');
                    },
                    error: function () {
                    }
                });
                return false;
            }
            function getSearchPublishers() {
                $("#publisherId").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetAllPublisher")',
                    data: {},
                    success: function (publishers) {
                        $("#publisherId").append('<option value="">All</option>');
                        $.each(publishers, function (i, publisher) {
                            $("#publisherId").append('<option value="' + publisher.Id + '">' + publisher.Name + '</option>');
                        });
                        $('#publisherId').selectpicker('refresh');
                        $('#publisherId').selectpicker('val', '@ViewBag.SearchPublisherId');
                    },
                    error: function () {
                    }
                });
                return false;
            }
        });
    </script>
}

@section Css{
    <link href="~/Content/assets/global/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <link href="~/Content/assets/frontend/pages/css/jquery-ui.css" rel="stylesheet" type="text/css">
    <link href="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
}